import React, { useState } from 'react';
import { Card, Radio, Table, Button } from 'antd';
import moment from 'moment';
import TaskInfo from './TaskInfo';
import { getHour } from '../../utils';
import { useTaskCount } from '../../hooks';
// import { useTaskCount, useProductProjectList } from '../../hooks';
import styles from './index.less';

// const { Option } = Select;

// 个人工作透视 - 任务清单

// 2020-4-7:注释的代码为临时隐藏，后面可能还需要

const WorkOverview = ({ workData = {}, data = {}, query = {}, onSearch }) => {
    const [taskInfoVisible, setTaskInfoVisible] = useState(false);
    const [taskInfoDetail, setTaskInfoDetail] = useState({});

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [taskCountLoading, taskCountData] = useTaskCount(query); // 状态数量
    // const [productLoading, productProject] = useProductProjectList(); // 产品线数据

    // card右侧下拉菜单
    // const productOptions = productProject.map(item => ({
    //     label: item.productName,
    //     value: item.id
    // }));
    // const cardExtra = (
    //     <Select
    //         allowClear
    //         style={{ width: 160 }}
    //         placeholder="请选择"
    //         loading={productLoading}
    //         onChange={e => {
    //             onSearch({ productId: e });
    //         }}
    //     >
    //         {productOptions.map(item => (
    //             <Option key={item.value}>{item.label}</Option>
    //         ))}
    //     </Select>
    // );

    const columns = [
        {
            title: '任务ID',
            dataIndex: 'taskNo',
            key: 'taskNo'
        },
        {
            title: '任务标题',
            dataIndex: 'taskName',
            key: 'taskName',
            width: 285,
            render: (text, record) => (
                <Button
                    className={styles.linkbtn}
                    type="link"
                    onClick={() => {
                        setTaskInfoDetail(record);
                        setTaskInfoVisible(true);
                    }}
                >
                    {text}
                </Button>
            )
        },
        {
            title: '计划开始日期',
            dataIndex: 'planStartDate',
            key: 'planStartDate',
            align: 'center',
            render: text => (text ? moment(text).format('YYYY-MM-DD') : '--')
        },
        {
            title: '计划完成日期',
            dataIndex: 'planEndDate',
            key: 'planEndDate',
            align: 'center',
            render: text => (text ? moment(text).format('YYYY-MM-DD') : '--')
        },
        {
            title: '计划工作量',
            dataIndex: 'orginEstimateMinute',
            key: 'orginEstimateMinute',
            align: 'center',
            render: text => {
                const hour = getHour(text);
                return `${hour}小时`;
            }
        }
    ];

    return (
        <div>
            <Card bordered={false} title="任务清单" className={styles.taskList}>
                <Radio.Group
                    onChange={e => {
                        onSearch({ taskStatus: e.target.value });
                    }}
                    defaultValue=""
                >
                    <Radio.Button value="待办">待执行 ({taskCountData['待办'] || 0})</Radio.Button>
                    <Radio.Button value="处理中">进行中 ({taskCountData['处理中'] || 0})</Radio.Button>
                    <Radio.Button value="完成">已完成 ({taskCountData['完成'] || 0})</Radio.Button>
                    <Radio.Button value="">全部 ({taskCountData['全部'] || 0})</Radio.Button>
                </Radio.Group>

                <Table rowKey="id" style={{ marginTop: 16 }} columns={columns} dataSource={data} pagination={false} />
            </Card>
            <TaskInfo
                visible={taskInfoVisible}
                data={taskInfoDetail}
                userdata={workData}
                onClose={() => setTaskInfoVisible(false)}
            />
        </div>
    );
};

export default WorkOverview;
